import React, { useRef } from 'react'
// 鼠标悬停时显示一个叠加层
import ImageOverlay from '../ImageOverlay/ImageOverlay';
import './ImagesConList.css'
// 数据的操作
import DesignDate from '../MydesignOperate/DesignDate'
// 编辑的操作
import DesignEdit from '../MydesignOperate/DesignEdit'
// 推广的操作
import DesignPromotion from '../MydesignOperate/DesignPromotion'

import { LeftOutlined, RightOutlined } from '@ant-design/icons';
const ImagesConList: React.FC = () => {
    // 1、创建一个引用来获取容器元素
    const containerRef = useRef<HTMLDivElement>(null);
    // /2、定义滑动到右侧的函数
    const scrollRight = () => {
        ///3、首先判断 这个容器当前选中项是否存在。containerRef 通常是一个引用对象，指向某个 DOM 元素。如果该元素存在，则执行后续的滚动操作
        if (containerRef.current) {          //每次滚动的距离    平滑滚动
            containerRef.current.scrollBy({ left: 1000, behavior: 'smooth' });
        }
    }
    ///3、定义滑动到左侧的函数
    const scrollLeft = () => {
        if (containerRef.current) {     //每次滚动的距离    平滑滚动
            containerRef.current.scrollBy({ left: -1000, behavior: 'smooth' });
        }
    }
    return (
        <div className='Design_ListBox'>
            {/* 左按钮 */}
            <button onClick={scrollLeft} className='leftBtnList'><LeftOutlined /></button>
            {/* 右按钮 */}
            <button onClick={scrollRight} className='rightBtnList'><RightOutlined /></button>
            {/*/4、内容 */}
            <div className='Design_List' ref={containerRef} >
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                        // 默认内容
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/05/c5ce465e-630b-4182-a940-34d213d039ca_thumb?v=1721142300000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70" alt="" />
                                <div className='oldSrcText'>
                                    <p>海报</p>
                                    <h3>简约国庆节祝福问候海报</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            // 悬浮内容
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/08/b9fc4dfa-d4cd-4c85-bc54-ffa0a219ed52_thumb?v=1720407240000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70" alt="" />
                                <div className='oldSrcText'>
                                    <p className='oldSrcTextP1'>表单</p>
                                    <h3>平安城市征文活动投票评选</h3>
                                    <span>2024-09-21</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/05/13/92c2c8f6-7f21-43ff-aa83-5a332fbf7f02_thumb?v=1715589365000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p>海报</p>
                                    <h3>心情日签早安拼图</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/29/ae223965-e309-441a-835a-b7bc26d73e6f_thumb?v=1722225601000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p className='oldSrcTextP2'>视频</p>
                                    <h3>数字人口播企业宣传</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/01/22/47f0cc75-dad8-4626-9b5c-fefcfb6ef45c_thumb?v=1716878987000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p className='oldSrcTextP3'>互动</p>
                                    <h3>创客贴活动</h3>
                                    <span>2024-09-14</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/05/900725a8-412a-4ed1-93db-bb27d466d8ca_thumb?v=1722840001000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p>H5</p>
                                    <h3>紫色轻奢唯美时尚品牌商务</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2023/08/31/053f2eb2-d36f-465a-ba3c-53d9ec3a4ae6_thumb?v=1716899699000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p>视频</p>
                                    <h3>数字人口播企业宣传</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/d3a8368f-19f5-4442-8583-626e28aaac99_thumb?v=1726067101000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p>海报</p>
                                    <h3>创客贴活动</h3>
                                    <span>2024-09-14</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
                <div className="ConList1">
                    <a href="">
                        <ImageOverlay
                            mainContent={<div className='oldSrc'>
                                <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/09/6b01291f-100d-4bdc-87b7-57c01c5d8828_thumb?v=1725843720000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                                <div className='oldSrcText'>
                                    <p>H5</p>
                                    <h3>紫色轻奢唯美时尚品牌商务</h3>
                                    <span>2024-09-24</span>
                                </div>
                            </div>}
                            overlayContent={<div className='newSrc'>
                                <div className="blckText">
                                    <button>预览</button>
                                </div>
                                <div className="whiteText">
                                    {/* 编辑 */}
                                    <DesignEdit></DesignEdit>
                                    {/* 数据 */}
                                    <DesignDate></DesignDate>
                                    {/* 推广 */}
                                    <DesignPromotion></DesignPromotion>
                                </div>
                            </div>}
                        />
                    </a>
                </div>
            </div>
        </div>

    )
}

export default ImagesConList